<template>
  <div>
    <el-row>
      <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="type"
        label="#"
        width="100">
      </el-table-column>
      <el-table-column
        prop="des"
        label="链接描述"
        width="240">
      </el-table-column>
      <el-table-column
        label="链接图片"
        width="240">
        <template slot-scope="scope">
          <img :src="'http://124.223.14.236:8060/' + scope.row.img" alt="" id="img">
        </template>
      </el-table-column>
      <el-table-column
        label="链接类型"
        width="240">
        <template >
          <span>
            {{tableData.type === 1 ? '图片类型' : '图片类型'}}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        prop="url"
        label="链接地址"
        width="180">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
        <el-button  type="primary" size="small" icon="el-icon-edit"  circle @click="editBtn(scope.row.id)"  ></el-button>
        <el-button type="danger" size="small" icon="el-icon-delete" circle @click="delBtn(scope.row.id)"></el-button>
      </template>
      </el-table-column>
    </el-table>
    </el-row>
     <!-- 分页组件 -->
        <el-pagination
          layout="total,sizes,prev, pager, next,jumper"
          :page-size="queryData.size"
          :current-page.sync="queryData.page"
          :page-sizes="[10,20,40,60]"
          :total="total"
          background
          @current-change="changePage"
          @size-change="changeSize"
        />
           <!-- 新增、修改弹窗 -->
   <el-dialog
    :title="formData.id ? '修改友情链接' : '添加友情链接'"
    :visible.sync="dialogShow"
    >
  <el-form ref="form" :model="formData" :rules="formRules" label-width="140px">
    <el-form-item label="链接类型" prop="type" size="normal">
        <el-input size="small" v-model="formData.type" style="width:320px" />
      </el-form-item>
      <el-form-item label="链接地址" prop="url" size="normal">
        <el-input size="small" v-model="formData.url" style="width:320px" />
      </el-form-item>
      <el-form-item label="链接描述" :rows="2" type="textarea" prop="des" size="normal">
        <el-input size="small" v-model="formData.des" style="width:320px" />
      </el-form-item>
      <el-form-item label="链接图片"   prop="img" size="normal">
        <el-button size="small" type="primary" @click="imgShow = true">点击上传</el-button>
      </el-form-item>
      <el-form-item    prop="img" size="normal" v-if="imgShow">
        <el-input size="small" type="file" v-model="formData.img" style="width:320px" />
      </el-form-item>
      <el-form-item style="text-align: right">
      <el-button  size="small" @click="dialogShow = false " >取消</el-button>
      <el-button  size="small"  type="primary" @click="btnOk">确定</el-button>
      </el-form-item>
  </el-form>
   </el-dialog>
  </div>
</template>

<script>
import { getTextListApi, delTextApi, getTextInfoApi, editTextApi } from '@/api/adv/textLink'
export default {
  data() {
    return {
      imgShow: false,
      dialogShow: false,
      tableData: [],
      formData: {
        type: '',
        title: '',
        url: '',
        des: '',
        img: ''
      },
      formRules: {
        type: [{ required: true, message: '请输入', trigger: 'blur' }],
        title: [{ required: true, message: '请输入', trigger: 'blur' }],
        url: [{ required: true, message: '请输入', trigger: 'blur' }],
        des: [{ required: true, message: '请输入', trigger: 'blur' }],
        img: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      queryData: {
        type: 2,
        page: 1,
        limit: 10
      },
      total: 0
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      const { data, count } = await getTextListApi(this.queryData)
      // console.log(data)
      this.tableData = data
      this.total = count
    },
    // 数量切换事件
    changeSize(val) {
      this.queryData.limit = val
      this.initData()
    },
    changePage(val) {
      this.queryData.page = val
      this.initData()
    },
    async delBtn(Id) {
      // console.log(Id)
      try {
        await this.$confirm('确认删除吗？')
      } catch (error) {
        return console.log(error)
      }
      await delTextApi(
        {
          id: Id
        }
      )
      // 提示成功
      this.$message.success('删除成功')
      // 边缘问题
      if (this.queryData.page > 1 && this.tableData.length === 1) {
        this.queryData.page--
      }
      this.initData()
    },
    async editBtn(Id) {
      this.dialogShow = true
      const res = await getTextInfoApi(
        {
          id: Id
        }
      )
      // 当数据会显的时候，已经把id传到formData里面
      this.formData = res
      // console.log(res)
    },
    // 发送请求
    async btnOk() {
      try {
        await this.$refs.form.validate()
      } catch (error) {
        return console.log(error)
      }
      await editTextApi(this.formData)
      this.$message.success('修改成功')
      // 列表更新
      this.initData()
      // 弹框关闭
      this.dialogShow = false
    }

  }
}
</script>

<style>
 #img{
    width: 120px;
    height: 100px;
  }
</style>
